
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css">
  <style>
    .lunBo img {
      width: 100% !important;
      height: 300px;
    }

    .product {
      position: relative;
    }

    .product .loading {
      display: none;
      z-index: 1;
      color: white;
      position: absolute;
      width: 100%;
      height: 100%;
      text-align: center;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, .5);
    }

    .product .loading h1 {
      padding-top: 100px;
    }

    /* 产品列表 */
    .row li {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <!-- 导航 -->
  <nav class="navbar navbar-dark navbar-expand-lg bg-primary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Logo</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="/login.html">登陆</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="/reg.html">注册</a>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>
  <!-- 轮播 -->
  <div id="carouselExampleIndicators" class="carousel slide lunBo" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
        aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
        aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
        aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftrifront001.h5yo.cn%2Fstatic%2Fupload%2F1564138991%2Fnews%2F20200407104908_31853.png&refer=http%3A%2F%2Ftrifront001.h5yo.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639014779&t=f203900bee09380f177422b3d29303ca"
          class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.yzlfxy.com%2Fd%2Ffile%2F2020%2F04%2F21%2Fe06a5077682722d00cc5282ec18553f3.jpg&refer=http%3A%2F%2Fwww.yzlfxy.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639014779&t=038e34345b1141415035114ea2746b11"
          class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.16pic.com%2F00%2F54%2F00%2F16pic_5400872_b.jpg&refer=http%3A%2F%2Fpic3.16pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639014779&t=d4640f2ac5fb9e413154bfa998c0cfbb"
          class="d-block w-100" alt="...">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
      data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
      data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
  <!-- 产品列表 -->
  <div class="container product">
    <!-- 加载的弹窗动画 -->
    <div id="loading" class="loading">
      <h1>正在加载中……</h1>
    </div>
    <ul id="row" class="row">
      <!-- 内容ajax给的 -->
    </ul>
  </div>
</body>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script>
  // 页数
  var page = 1, pages = 1;
  // 获取用户的信息
  var user = JSON.parse(localStorage.getItem('userinfo'))
  var loading = document.querySelector('#loading')
  loading.style.display = 'block'
  // 请求数据的函数
  function getList(page) {
    $.ajax({
      url: "http://websong.wang:4000/rl",
      data: {
        page
      }
    }).then(res => {
      loading.style.display = 'none'
      if (res.code) {
        var li = $('#row').html()
        res.result.list.forEach(item => {
          li += `
            <li class="col-6">
              <div class="card tc">
            <img src="${user.host + item.icon}" class="card-img-top" />
            <div class="card-body">
            <h5 class="card-title">
              ${item.goods_name}
            </h5>
            <p class="card-text">
              价格：${item.normal_price}元
            </p>
          </div>
        </div>
      </li>
          `
        });
        $('#row').html(li);
        // 设置总页数
        pages = Math.ceil(res.result.totals / res.result.number)
      } else {
        alert("请求失败")
      }
    })
  }
  // 节流函数
  function throttle(fn, delay) {
    var prev = Date.now()
    var time = null
    return function () {
      clearTimeout(time)
      if (Date.now() - prev > delay) {
        fn()
        prev = Date.now()
      } else {
        time = setTimeout(() => {
          fn()
          prev = Date.now()
        }, delay / 2)
      }
    }
  }
  $(function () {
    // 自动请求
    getList(page)
    // 监听滚动事件，加载下一屏数据
    var doc = document.documentElement;
    window.onscroll = throttle(() => {
      // 判断是否到底部
      if (doc.scrollHeight - 200 <= doc.scrollTop + doc.clientHeight) {

        if (page < pages) {
          // page页面进行累加
          page++
          // 调用加载数据的函数
          getList(page)
        }

      }

    }, 1000)
  })
</script>

</html>